<template>
	<view class="personal-set-container">
		<common-title :title="titleContent" @clickLeft="backToUpPage"></common-title>
		<view class="personal-set-uni-list">
			<uni-list>
				<!-- 头像 -->
				<uni-list-item showArrow clickable @click="changeAvatar">
					<template v-slot:header>
						<view style="display: flex;align-items: center;font-size: 18px;color:#3b4144;">头像(app端调试不符合要求)</view>
					</template>
					<template v-slot:footer>
						<image class="slot-image" :src="personalInfo.avatar" mode="aspectFill"></image>
					</template>
				</uni-list-item>
				<!-- 名字 -->
				<uni-list-item title="名字" showArrow clickable :rightText="personalInfo.userName" @click="changeUserName(personalInfo.userName)"></uni-list-item>
				<!-- 性别 -->
				<uni-list-item title="性别" showArrow clickable :rightText="personalInfo.sex === 1 ? '男' : '女'" @click="changeSex(personalInfo.sex)"></uni-list-item>
				<!-- 生日 -->
				<uni-list-item title="生日" showArrow clickable :rightText="personalInfo.birthday" @click="changeBirthday(personalInfo.birthday)"></uni-list-item>
				<!-- 账号 -->
				<uni-list-item title="账号" :rightText="personalInfo.account"></uni-list-item>
				<!-- 修改密码 -->
				<uni-list-item title="登录密码" showArrow clickable @click="changePasswd"></uni-list-item>
			</uni-list>
		</view>

		<view style="height: 10px;"></view>
		<button @click="quickLogin">
			<view>退出登录</view>
		</button>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import { getUserInfo } from "../../../utils/apiMine";
	
	
	
	//===============================用户是否登录了=====================
	//================================common-title=========================================
	//标题内容
	const titleContent = ref({
		left:'',
		midst:'个人信息'
	});
	
	//返回
	const backToUpPage = () => {
		uni.switchTab({
			url:'/pages/mine/mine'
		})
	};
	
	//-----------------------------------获取个人信息----------------------------------------
	//承接个人信息
	const personalInfo = ref({
		account:null,
	    avatar: null, // 默认头像
	    userName: null, // 默认用户名
	    sex: null, // 默认性别
	    birthday: null // 默认生日
	});
	//api获取个人信息
	const getUserSetInfo = async () => {
		let res = await getUserInfo();
		personalInfo.value = res;
		// console.log(personalInfo.value);
		// console.log(res);
	}
	getUserSetInfo();
	
	//-----------------------------------退出登录----------------------------------------
	const quickLogin = () => {
		uni.removeStorage({
			key:'token',
			success:function(){
				uni.reLaunch({
					url:'/pages/mine/mine'
				})
			}
		})
	};
	//-----------------------------------用户信息更改----------------------------------------
	//修改头像
	const changeAvatar = () => {
		console.log(personalInfo.value.avatar);
		uni.chooseImage({
			sourceType:'album',
			crop:{
				quality:100,
				width:100,
				height:100
			},
			success: function(res) {
				// 预览图片
				uni.previewImage({
					urls: res.tempFilePaths,
				});
			}
		})
	}
	
	//修改名字
	const changeUserName = (userName) => {
		// console.log(userName);
		uni.navigateTo({
			url: `/pages/mine/other_set/personal_set_item/personal-set-name?userName=${encodeURIComponent(userName)}`
		});
	}
	
	//修改性别
	const changeSex = (sex) => {
		uni.navigateTo({
			url: `/pages/mine/other_set/personal_set_item/personal-set-sex?sex=${encodeURIComponent(sex)}`
		});
	}
	
	//修改生日
	const changeBirthday = (birthday) => {
		uni.navigateTo({
			url: `/pages/mine/other_set/personal_set_item/personal-set-birthday?birthday=${encodeURIComponent(birthday)}`
		});
	}
	
	//修改登录密码
	const changePasswd = () => {
		uni.navigateTo({
			url: `/pages/mine/other_set/personal_set_item/personal-set-passwd`
		});
	}
</script>

<style lang="scss" scoped>
	.personal-set-container{
		.personal-set-uni-list{
			uni-list-item{
				font-size: 36px;
			}
		}
	}
	.slot-image {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			margin-right: 10px;
			width: 50px;
			height: 50px;
			border-radius: 10rpx;
	}
</style>